<template>
  <com-application-charts :application-charts-title="applicationChartsTitle"  :msg.sync="msg" chartsurl="care/site/school/app/dashboard" titleurl="care/site/school/app/dashboard"></com-application-charts>
  <div class="processMain row">
      <com-showcard cardheadertext="使用人次" role="部门" cardurl="care/site/school/app/visitorRank" cardheaderinfotext="(排名越高使用人次越多)" :cardtablethead="usetimescardtablethead" :msg.sync="msg" a="rank" b="department" c="appnum" d="usetimes"></com-showcard>
      <com-showcard class="middleshowcard" cardheadertext="评价" role="部门" cardurl="care/site/school/app/scoreRank" cardheaderinfotext="(排名越高评分越高)" :cardtablethead="commentcardtablethead" :msg.sync="msg" a="rank" b="department" c="commentnum" d="points"></com-showcard>
      <com-showcard cardheadertext="收藏" cardurl="care/site/school/app/favouriteRank" role="部门" cardheaderinfotext="(排名越高评分越高)" :cardtablethead="likecardtablethead" :msg.sync="msg" a="rank" b="department" c="likenum" d="points"></com-showcard>
  </div>
</template>
<script>
import ComShowcard from '../../components/showcard.vue';
import ComApplicationCharts from '../../components/applicationCharts.vue';
export default {
  data () {
    return {
      usetimescardtablethead: [{"name":"部门名称"},{"name":"应用数量"},{"name":"总使用人次"}],
      commentcardtablethead: [{"name":"部门名称"},{"name":"评价总人数"},{"name":"平均得分"}],
      likecardtablethead: [{"name":"部门名称"},{"name":"平均得分"},{"name":"平均收藏次数"}],
      // kind:"all",
      msg:"1",
      applicationChartsTitle:[{name:"总应用数"},{name:"总使用人数"},{name:"当前在线人数"}]
    }
  },
  components: {
    ComShowcard,
    ComApplicationCharts
  },
  created () {
    
  },
  methods: {
  }
}
</script>

<style scoped>
div.processCenterheader {
    float: left;
    width: 100%;
}
div.processCenterHead {
   font-size: 18px;
   padding: 16px 0;
}
div.processCenterHead span {
  color: #767E85; 
  letter-spacing: 5px;
}
div.processCenterHead span:last-child{
  font-size: 12px;
  letter-spacing: normal;
}
.middleshowcard {
  margin: 0 2%;
}
.row{
  margin-left: 0!important;
  margin-right: 0!important;
}
</style>
